<template>
    <div>
        <transition name="slide-up">
            <div class="menu-wrapper" v-show="menuVisible" :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}">
                <div class="icon-wrapper">
                    <span class="icon-menu" @click="showSetting(3)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-progress" @click="showSetting(2)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-bright" @click="showSetting(1)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-A" @click="showSetting(0)"></span>
                </div>
            </div>
        </transition>
        <ebook-setting-font></ebook-setting-font>
        <ebook-setting-font-popup></ebook-setting-font-popup>
        <ebook-setting-theme></ebook-setting-theme>
        <ebook-setting-progress></ebook-setting-progress>
        <ebook-slide></ebook-slide>
    </div>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookSettingFont  from './EbookSettingFont.vue'
import EbookSettingFontPopup from './EbookSettingFontPopup.vue'
import EbookSettingTheme from './EbookSettingTheme.vue'
import EbookSettingProgress from './EbookSettingProgress.vue'
import EbookSlide from './EbookSlide.vue'
export default {
    mixins: [ebookMixin],
    components: { 
        EbookSettingFont,
        EbookSettingFontPopup,
        EbookSettingTheme,
        EbookSettingProgress,
        EbookSlide
    },
    
    methods: {
        showSetting(key) { //显示菜单四个设置中的一个 
            this.setSettingVisible(key)
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
    .menu-wrapper { 
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 102;
        display: flex;
        width: 100%;
        height: px2rem(48);
        background: white;
        box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,.15);
        font-size: px2rem(20);
        &.hide-box-shadow { //如果显示了某个主设置，就隐藏menu-wrapper阴影
            box-shadow: none;
        }
        .icon-wrapper { 
            display: flex;
            flex: 1;
            @include center;
            .icon-menu { 

            }
            .icon-progress { 
                font-size: px2rem(24);
            }
            .icon-bright { 
                font-size: px2rem(24);
            }
            .icon-A { 

            }
        }
    }
</style>